<template>
  <div>
    <p class="u-title">私信</p>
    <ul class="private-box">
      <li v-for="item in arr" :key="item.id">
        <img class="avatarUrl" :src="item.fromUser.avatarUrl" alt="" />
        <div class="private-right">
          <p class="nickname">
            {{ item.fromUser.nickname }}
            <span class="lastMsgTime">
              {{ item.lastMsgTime | fmtDate("MM月DD日 hh:mm") }}</span
            >
          </p>
          <p class="txtHide msg">
            {{
              (item.lastMsg.album && item.lastMsg.album.name) ||
              item.lastMsg.msg
            }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { privatesrc } from "@/api";
export default {
  data() {
    return {
      limit: 30,
      arr: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      privatesrc({ limit: this.limit }).then((res) => {
        this.arr = res.msgs.map((item) => {
          item.lastMsg = JSON.parse(item.lastMsg);
          return item;
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.private-box {
  li {
    padding: 16px 0;
    display: flex;
    border-bottom: 1px dotted #ccc;
    .avatarUrl {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    .private-right {
      flex: 1;
      overflow: hidden;
      .msg {
        color: #999;
      }
      .nickname {
        color: #000;
        font-size: 14px;
        font-weight: 700;
        .lastMsgTime {
          font-weight: 100;
          font-size: 12px;
          float: right;
        }
      }
    }
  }
}
</style>